<template>
  <div class="container">
    <div class="left">
      <img src="../assets/computer.svg" alt="" />
      <h2 style="color: white; font-size: 24px; margin-top: 30px">
        战五渣的admin
      </h2>
    </div>
    <div class="right">
      <div class="login-form">
        <h1 style="font-weight: 900; font-size: 36px">登录</h1>
        <n-form
          :label-width="80"
          :model="formValue"
          :rules="rules"
          :size="size"
          ref="formRef"
        >
          <n-form-item label="" path="user.name">
            <n-input
              v-model:value="formValue.user.name"
              placeholder="输入用户名"
            />
          </n-form-item>
          <n-form-item label="" path="user.age">
            <n-input
              placeholder="输入密码"
              type="password"
              v-model:value="formValue.user.age"
              @keydown.enter="login"
            />
          </n-form-item>
          <n-form-item label="" path="remember">
            <n-checkbox v-model:checked="formValue.remember">记住我</n-checkbox>
            <a href="#" class="reset">忘记密码</a>
          </n-form-item>
          <n-form-item>
            <n-button type="info" @click="login" attr-type="button" class="btn"
              >登陆</n-button
            >
          </n-form-item>
        </n-form>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
import { useMessage } from "naive-ui";
import { useRouter } from "vue-router";
import { mapMutations } from "vuex";
export default defineComponent({
  setup() {
    const router = useRouter();
    const formRef = ref(null);
    const message = useMessage();
    return {
      ...mapMutations[""],
      formRef,
      formValue: ref({
        user: {
          name: "",
          age: "",
        },
        remember: "",
        phone: "",
      }),
      rules: {
        user: {
          name: {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
          age: {
            required: true,
            message: "请输入密码",
            trigger: ["input", "blur"],
          },
        },
      },
      login(e) {
        e.preventDefault();
        formRef.value.validate((errors) => {
          if (!errors) {
            message.success("校验成功");
            let token = "abc123123";
            localStorage.setItem("token", token);
            router.push("/index");
          } else {
            message.error("验证失败");
          }
        });
      },
    };
  },
});
</script>
<style scoped>
.container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  /* background-color: lavenderblush; */
  display: flex;
}
.left {
  background-image: url("../assets/login-bg.svg");
  background-position: 100%;
  background-repeat: no-repeat;
  width: 50%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.left img {
  width: 45%;
}
.right {
  width: 50%;
  min-height: 100vh;
  display: flex;
  margin-left: 100px;
  /* justify-content: center; */
  align-items: center;
}
.login-form {
  /* border: 1px solid black; */
  /* box-shadow: 4px 4px 5px 5px #999; */
  padding: 30px;
  width: 45%;
}
.reset{
  position: absolute;
  right: 0;
}
.btn {
  margin: auto;
  width: 100%;
}
</style>